<template>
    <div>
        <web-header />
        <div class="daohang_a">
            您的位置：
            <router-link to="/">首页</router-link> &gt;
            <router-link to="/visa">签证中心</router-link>
            <!-- <a href="/visa/">{{ title }}签证</a> -->
        </div>
        <div class="main">
            <div class="main-left">
                <div class="left-nav">
                    <div class="nav-menu" id="nav-menu" style="background-color: #0db770;">
                        <ul>
                            <!-- <li class="off" id="one1" onclick="setTab('one',1)">旅游签证</li>
                            <li id="one2" onclick="setTab('one',2)">商务签证</li>
                            <li id="one3" onclick="setTab('one',3)">探亲签证</li> -->
                            <li class="off" id="one1">签证国家</li>

                        </ul>
                    </div>
                    <div class="menu-div">
                        <div id="con_one_1">
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/PKDEcu.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">亚洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['亚洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                    <!--                                    <router-link href="/visa/list/3365">台湾</router-link>-->
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/AEsBgM.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">欧洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['欧洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/kmnFUG.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">美洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['美洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/fRzmRP.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">澳洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['澳洲']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/area/gq7SWx.jpg"
                                        width="20" height="20" /><a href="javascript:void(0)">非洲签证</a>
                                </dt>
                                <dd>
                                    <router-link v-for="rs in country['中东非']" :key="rs.id" :to="`/visa/list/${rs.id}`">
                                        {{ rs.title }}
                                    </router-link>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>

                <!-- <div class="left_a">
                    <div class="top">{$area_old.title}国家签证</div>
                    <div class="bottom">
                        <ul>
                            <volist name="visa_area" id="rs">
                                <li>
                                    <img src="https://admin.hqx.com.cn/Public/Uploads/{$rs.pic}" /><a
                                        href="/visa/{$rs.id}.html">{$rs.area}签证</a><span>￥{$rs.price}元/人</span>
                                </li>
                            </volist>
                        </ul>
                    </div>
                </div> -->

                <!-- <div class="left-04">
                    <dl>
                        <dt>常用下载</dt>
                        <volist name="downloads" id="rs">
                            <dd>
                                <a target="_blank" href="/Public/Uploads/{$rs.file}">{$rs.title}</a>
                            </dd>
                        </volist>
                    </dl>
                </div> -->

                <!-- <div class="left-04">
                    <dl>
                        <dt>签证资讯</dt>
                        <volist name="news" id="rs">
                            <dd>
                                <a target="_blank" href="/news/{$rs.id}.html">{$rs.title}</a>
                            </dd>
                        </volist>
                    </dl>
                </div> -->
            </div>

            <div class="main-right">
                <!-- <div class="country">
                    <div class="country-tittle">
                        <ul>
                            <li class="flag" style="padding-left: 18px">
                                <img :src="`https://admin.hqx.com.cn/Public/Uploads/${data.pic}`" /><span>
                                    {{data.title}}签证</span>
                            </li>
                            <li>有效期</li>
                            <li>办证时间</li>
                            <li class="money">价格</li>
                            <li class="ding">预定</li>
                        </ul>
                    </div>
                    <div class="wrap">
                        <volist name="v_list" id="rs">
                            <ul>
                                <li class="flag">
                                    <a href="/visa/{$rs.id}.html">{$rs.title}</a>
                                </li>
                                <li>{$rs.VisaList.expiry}</li>
                                <li>{$rs.VisaList.stay}</li>
                                <li class="money">
                                    <span>￥</span>{$rs.price}<span>/人起</span>
                                </li>
                                <li class="ding">
                                    <a href="https://tb.53kf.com/code/client/056a7c01463dbbb61ea4ab91a2b5a06e/1"
                                        target="_blank">去预定</a>
                                </li>
                            </ul>
                        </volist>
                    </div>
                </div> -->
                <div class="visa-top">
                    <div class="visa-jump">
                        <ul>
                            <li>签证信息</li>
                            <li>签证资料</li>
                            <li>温馨提示</li>
                            <li>签证指南</li>
                        </ul>
                    </div>
                    <h3>{{ data.title }}</h3>
                    <ul class="explain">
                        <!-- visa.visa2Pro.expiry -->
                        <li>
                            <i class="iconfont">&#xe622;</i>有效期限:<span>{{ data.visa2Pro ? data.visa2Pro.expiry : ''
                            }}</span>
                        </li>
                        <li>
                            <i class="iconfont">&#xe61b;</i>最长停留:<span>{{ data.visa2Pro ? data.visa2Pro.stay : ''
                            }}</span>
                        </li>
                        <li v-if="data.visa2Pro"><i class="iconfont">&#xe643;</i>办理时长:

                            <span v-if="data.visa2Pro.need_days == data.visa2Pro.op_days">{{ data.visa2Pro
                                ? data.visa2Pro.need_days + data.visa2Pro.op_days : '' }}&nbsp;工作日</span>
                            <span v-else>{{ data.visa2Pro.need_days + data.visa2Pro.op_days }}-{{
                                data.visa2Pro.need_days_longest + data.visa2Pro.op_days }}&nbsp;工作日</span>

                        </li>


                        <li>
                            <i class="iconfont">&#xe662;</i>入境次数:<span>{{ data.visa2Pro ? data.visa2Pro.visa_nums ==
                                ',133,' ? "单次" : "多次" : '' }}</span>
                        </li>
                        <li>
                            <i class="iconfont">&#xe614;</i>费用包含:<span>签证费+服务费</span>
                        </li>
                    </ul>
                    <a class="button" href="javascript:void(0)">立即预定</a>
                </div>
                <div class="box1">
                    <div class="tittle">
                        <h3>签证资料</h3>
                        <span>所列材料仅适合在职人员参考，其他具体可咨询客服人员</span>
                    </div>
                    <div class="data-menu">
                        <ul id="datastab">
                            <li v-for="(rs, index) in dataMenu" :key="index" @mouseenter="menuChange(rs[1])"
                                :class="rs[1] == menuIndex ? 'active' : ''">
                                {{ rs[1] }}
                            </li>

                        </ul>
                    </div>
                    <div class="data" id="datascon">
                        <ul v-for="item in menuShow" :key="item.id">
                            <div v-if="item.datas.length">
                                <div class="title">★ {{ item[1] }}</div>
                                <li v-for="(itemChild, index2) in item.datas" :key="index2">
                                    <div class="collapse-header">

                                        <div class="data-right">
                                            <div class="t1">{{ itemChild.title }}
                                                <div v-if="itemChild.required == 1" class="t1-img"> <img
                                                        style="width: 12px; height: 11px; "
                                                        src="https://admin.hqx.com.cn/Public/App/image/icon-material-star-2.png"
                                                        alt="">（必须） </div>
                                            </div>
                                            <div class="t2" v-html="itemChild.content"></div>
                                            <div class="t3" v-if="itemChild.Status != 0"> <a href="javascript:void(0)"
                                                    @click="downloadFile(itemChild)">{{ itemChild.Status == 2 ? "下载模板" :
                                                        "查看样例" }}</a> </div>


                                        </div>

                                    </div>
                                </li>
                            </div>

                            <!-- <li v-for="(rs, index) in item.datas" :key="rs.id">
                                <div class="data-left">
                                    <img v-if="item.title == '原件'"
                                        src="https://admin.hqx.com.cn/Public/Travel/images/visa/yuan.gif" />
                                    <img v-else-if="item.title == '复印件'"
                                        src="https://admin.hqx.com.cn/Public/Travel/images/visa/fu.gif" />
                                    <img v-else-if="item.title == '彩照'"
                                        src="https://admin.hqx.com.cn/Public/Travel/images/visa/cai.png" />

                                </div>
                                <div class="data-right">
                                    <div class="t1">{{ rs.title }}</div>
                                    <div class="t2" v-html="rs.content"></div>
                                </div>
                            </li> -->
                        </ul>


                    </div>
                </div>
                <div class="advert" style="background: #fff; text-align: center; margin-top: 15px">
                    <img src="https://admin.hqx.com.cn/Public/Travel/images/visa/advert.jpg" />
                </div>

                <div class="box2">
                    <div class="tittle">
                        <h3>注意事项</h3>
                        <span></span>
                    </div>
                    <div class="wrap">
                        <div v-if="data.visa2Pro" v-html="data.visa2Pro.matter"></div>
                        <b>【声明：本公司是一所专业的旅游代办机构，不隶属于领事馆政府，环球行网站致力于协助个人或者企业获得他们的旅行许可或短时间的入境停留。服务费均为领事馆所收，该费用包含各方面的帮助以及协助。
                            】</b>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <el-image-viewer v-if="showPreview" :url-list="imagesData" show-progress :initial-index="0"
                @close="showPreview = false" />
        </div>
        <web-footer />
        <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { visa_country, visa_details, visa_peoples, visa_data } from "@/api/travel";
import { useRoute } from "vue-router";
// import { ImageInstance } from 'element-plus'

const route = useRoute();

// 国家列表
let country = ref({ '亚洲': [], '欧洲': [], '中东非': [], '美洲': [], '澳洲': [] });
let countryIndex = ref('亚洲')

let getCountry = async () => {
    let data = localStorage.getItem('country');
    if (data.length) {
        country.value = JSON.parse(data);
    } else {
        country.value["亚洲"] = (await visa_country(49)).data.reverse();
        country.value["欧洲"] = (await visa_country(2)).data.reverse();
        country.value["中东非"] = (await visa_country(51)).data.reverse();
        country.value["美洲"] = (await visa_country(7)).data.reverse();
        country.value["澳洲"] = (await visa_country(50)).data.reverse();
        localStorage.setItem('country', JSON.stringify(country.value));
    }
}

// 详情
let data = ref({});
// 人群 tab
let dataMenu = ref([]);
let menuBox = ref({});
let menuIndex = ref('');


const initialize = async () => {
    // 详情
    data.value = (await visa_details({ id: route.params.id })).data;

    // 有效人群
    dataMenu.value = (await visa_peoples({ id: route.params.id })).data;
    // 循环遍历 指定人群资料
    dataMenu.value.forEach(async (item) => {
        let result = (await visa_data({ str: data.value.visa2Pro[item[0]] })).data;

        result = result.map((item, index) => {
            item.datas.forEach((child, i) => {
                if (child.pic.length) {
                    child.Status = 1; // 图片
                    child.pic = child.pic.map(res =>
                        "https://admin.hqx.com.cn/Public/Uploads/" + res)
                } else if (child.file) {
                    child.Status = 2; // 文件
                    child.file = "https://admin.hqx.com.cn/Public/Uploads/" + child.file
                } else {
                    child.Status = 0; // 无内容
                }

            })
            return item
        })

        menuBox.value[item[1]] = result;
    })
    menuIndex.value = dataMenu.value[0][1]
};

let menuChange = (title) => {
    menuIndex.value = title;
};
let imagesData = ref([]);
let showPreview = ref(false)

const downloadFile = (item) => {
    if (item.Status == 1) {
        imagesData.value = item.pic;
        // 打开图片
        showPreview.value = true
    } else if (item.Status == 2) {
        // 下载API
        window.open(encodeURI(item.file), '_blank');

    }

}

const menuShow = computed(() => {
    return menuBox.value[menuIndex.value]
});



onMounted(async () => {
    await getCountry()
    await initialize()
});



</script>
<style lang="scss" scoped>
@import "../../css/main_visa_details.css";
</style>